<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/l07.css">
	</head>
	<body>
		<!-- 计算器 -->
		<div style="padding: 10px 15px;border: 1px solid #ccc;">
			<input id="one" value="">
			+
			<input id="two" value="">
			<a onclick="calc()">=</a>
			<input id="res" value="">
		</div>
		<script>
			// 加法运算
			function add(one,two){
				var res = one + two;
				return res;
			}
			
			function calc(){
				var one = parseInt(document.getElementById('one').value);
				var two = parseInt(document.getElementById('two').value);
				var res = add(one,two);
				document.getElementById('res').value = res;
			}
		</script>
		
		<!-- 函数 -->
		<a onclick="say('张三','上海')">张三</a>
		<a onclick="say('李四','北京')">李四</a>
		<script>
			// var hanshu1 = function(){  }   通过声明的方式定义函数
			// var hanshu2(){  }              通过表达式的方式定义函数
			
			// say:函数值
			// name，city：参数
			// 一个函数可以不包含参数，也可以包含一个或多个参数，多个参数间用，分隔
			function say(name,city) {
				alert('我是'+ name + '，来自:' + city + '。');
			}
		</script>
		
		<!-- 删除商品 -->
		<ul>
			<li>商品1 <a onclick="removeProd(this)">删除</a></li>
			<li>商品2 <a onclick="removeProd(this)">删除</a></li>
			<li>商品3 <a onclick="removeProd(this)">删除</a></li>
		</ul>
		<script>
			// 移除元素
			function removeProd(element) {
				// confirm:确认弹窗，用户点击确认时返回true，点击取消时返回false
				if(confirm('确定要删除吗？')){
					// 获取按钮的父级元素li
					var parent = element.parentNode;
					// 获取按钮的爷元素ul
					var grparent = parent.parentNode;
					// 从爷元素中移除父元素
					grparent.removeChild(parent);
				}
			}
		</script>
		
		<!-- 用js控制页面元素的样式 -->
		<p id="p1">Hello World!</p>
		<p id="p2">Hello World!</p>
		
		<!-- p2的文本字体Arial，颜色蓝色，字号放大一号 -->
		<script>
			document.getElementById('p1').style.fontFamily = 'Arial';
			document.getElementById('p2').style.color = 'blue';
			document.getElementById('p2').style.fontSize = 'larger';
		</script>
		
		<!-- 选中/取消选中 -->
		<input type="checkbox">
		<label><i class=""></i></label>
	</body>
</html>